<template>
  <!-- 前台店铺页面 -->
  <div>
    <el-card>
    <!-- 模糊查框 添加按钮 -->
    <div class="abvoeBox">
        店铺名称:<el-input placeholder="请输入店铺名称" v-model="shopName" class="abvoeBox_input"></el-input>
        <el-button type="primary" @click="selectShopEntity()" style="margin-left:10px">查询</el-button>
        <el-button type="success" @click="openSaveShopDialogVisible()" style="margin-left:10px">添加</el-button>
    </div>
    <!-- 全查数据 -->
    <div class="belowBox">
       <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            fixed
            prop="shopName"
            width="200px"
            label="店铺名称">
            </el-table-column>
            <el-table-column
            prop="phone"
            width="150px"
            label="店铺电话">
            </el-table-column>
            <el-table-column
            prop="takeOutPhone"
            width="150px"
            label="外卖电话">
            </el-table-column>
            <el-table-column
            width="150px"
            prop="contactName"
            label="联系人姓名">
            </el-table-column>
            <el-table-column
            prop="shopLogo"
            label="门店logo"
            width="100">
            <template slot-scope="scope">
                <img :src='`http://127.0.0.1:15000/fileManager/getImageById?id=${scope.row.shopLogo}`'  style="width:70px;height:70px;">
            </template>
            </el-table-column>
            <el-table-column
            prop="facadeImageId"
            label="门面图片"
            width="100">
            <template slot-scope="scope">
                <img :src='`http://127.0.0.1:15000/fileManager/getImageById?id=${scope.row.facadeImageId}`'  style="width:70px;height:70px;">
            </template>
            </el-table-column>
            <el-table-column
            prop="lobbyImage"
            label="大堂图片"
            width="100">
            <template slot-scope="scope">
                <img :src='`http://127.0.0.1:15000/fileManager/getImageById?id=${scope.row.lobbyImage}`'  style="width:70px;height:70px;">
            </template>
            </el-table-column>
            <el-table-column
            prop="address"
            width="200px"
            label="门店地址">
            </el-table-column>
             <el-table-column
            prop="eatIn"
            label="堂食">
            <template slot-scope="scope">
                <p>{{scope.row.eatIn===0?"有堂食":"无堂食"}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="eatInTypeIds"
            label="堂食类型">
            </el-table-column>
            <el-table-column
            prop="operationStatus"
            label="营业状态">
            <template slot-scope="scope">
                <p>{{scope.row.operationStatus===0?"未营业":"营业中"}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="amount"
            label="销售总数">
            </el-table-column>
            <el-table-column
            prop="score"
            label="评分">
            </el-table-column>
            <el-table-column
            prop="minPrice"
            label="起送价">
            </el-table-column>
            <el-table-column
            prop="auditId"
            label="审核状态">
            </el-table-column>
            <el-table-column
            label="操作"
            width="300px"
            fixed="right">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="selectShopProtalByRoleOne(scope.row)">查看</el-button>
                <el-button type="danger" size="small"  >删除</el-button>
                <el-button type="success" size="small" >编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div style="margin-top: 20px;">
        <template>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
    </el-card>
    <!-- 单查用户详情 -->
    <el-dialog
        title="详情"
        :visible.sync="selectShopDialogVisible"
        width="40%"
        >
        <el-form :model="tableDataForm" ref="ruleForm"  label-width="100px" class="demo-ruleForm" style="text-align: left;">
            <el-form-item label="店铺名称" >
                <el-input v-text="tableDataForm.shopName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="店铺电话">
                <el-input v-text="tableDataForm.phone" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="外卖电话">
                <el-input v-text="tableDataForm.takeOutPhone" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名">
                <el-input v-text="tableDataForm.contactName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="门店logo">
               <img v-if="shopLogoImageUrl" :src="shopLogoImageUrl" style="width:200px;height:200px;">
            </el-form-item>
            <el-form-item label="门面图片">
               <img v-if="facadeImageIdImageUrl" :src="facadeImageIdImageUrl" style="width:200px;height:200px;">
            </el-form-item>
            <el-form-item label="大堂图片">
               <img v-if="lobbyImageImageUrl" :src="lobbyImageImageUrl" style="width:200px;height:200px;">
            </el-form-item>
            <el-form-item label="门店地址">
                <el-input v-text="tableDataForm.address" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="堂食">
                <el-input v-text="tableDataForm.eatIn ===0?'有堂食':'无堂食'"  style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="堂食类型">
                <el-input v-text="tableDataForm.eatInTypeIds"  style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="营业状态">
                <el-input v-text="tableDataForm.operationStatus ===0?'未营业':'营业中'"  style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="销售总数">
                <el-input v-text="tableDataForm.amount"  style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="评分">
                <el-input v-text="tableDataForm.score"  style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="起送价">
                <el-input v-text="tableDataForm.minPrice"  style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
                <el-input v-text="tableDataForm.auditId"  style="width: 200px;"></el-input>
            </el-form-item>
        </el-form>
    </el-dialog>
     <!-- 添加弹窗 -->
    <el-dialog
        title="添加"
        :visible.sync="saveShopDialogVisible"
        :before-close="closeExpertFormDialog"
        width="40%"
        >
        <!-- form表单 -->
        <el-form :model="tableDataForm" ref="ruleForm" :rules="saveShop" label-width="100px" class="demo-ruleForm" style="text-align: left;">
            <el-form-item label="店铺名称" prop="shopName">
                <el-input v-model="tableDataForm.shopName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="店铺电话" prop="phone">
                <el-input v-model="tableDataForm.phone" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="外卖电话" prop="takeOutPhone">
                <el-input v-model="tableDataForm.takeOutPhone" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名" prop="contactName">
                <el-input v-model="tableDataForm.contactName" style="width: 200px;"></el-input>
            </el-form-item>
            <!-- 上传门店logo图片 -->
            <el-form-item label="门店logo">
                <!-- action="http://127.0.0.1:8080/file/uploadFile" -->
                <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :before-upload="beforeAvatarUploadShopLogo">
                    <img v-if="shopLogoImageUrl" :src="shopLogoImageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <!-- 上传门面图片 -->
            <el-form-item label="门面图片">
                <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :before-upload="beforeAvatarUploadFacade">
                    <img v-if="facadeImageIdImageUrl" :src="facadeImageIdImageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <!-- 上传大堂图片 -->
            <el-form-item label="大堂图片">
                <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :before-upload="beforeAvatarUploadLobby">
                    <img v-if="lobbyImageImageUrl" :src="lobbyImageImageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="门店地址" prop="address">
                <el-input v-model="tableDataForm.address" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="堂食类型" prop="eatIn"  style="width: 200px;">
                <el-select v-model="tableDataForm.eatIn" placeholder="请选择">
                  <el-option label="有堂食" value="0"></el-option>
                  <el-option label="无堂食" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="堂食类型" prop="eatInTypeIds">
                <el-input v-model="tableDataForm.eatInTypeIds" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="营业状态" prop="operationStatus">
                <el-select v-model="tableDataForm.operationStatus" style="width: 200px;">
                  <el-option label="未营业" value="0"></el-option>
                  <el-option label="营业中" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="销售总数" prop="amount">
                <el-input v-model="tableDataForm.amount"  style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="评分" prop="score">
                <el-input v-model="tableDataForm.score"  style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="起送价" prop="minPrice">
                <el-input v-model="tableDataForm.minPrice"  style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="审核状态" prop="auditId">
                <el-input v-model="tableDataForm.auditId"  style="width: 200px;"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="saveUserBackEntity('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageFile: [],
      imageFileShopLogo: File,
      imageFileFacade: File,
      imageFileLobby: File,
      // 表单规则
      saveShop: {
        shopName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ]
      },
      // 添加弹窗
      saveShopDialogVisible: false,
      // 门店logo路径
      shopLogoImageUrl: '',
      // 门面图片路径
      facadeImageIdImageUrl: '',
      // 大堂图片路径
      lobbyImageImageUrl: '',
      // 单查数据集
      tableDataForm: {},
      // 单查弹窗
      selectShopDialogVisible: false,
      // 模糊查询（用户名称）
      shopName: '',
      // 全查后台用户表数据集
      tableData: [],
      // 分页 （pageSize）一页展示5条数据 （pageNum）当前页
      pageRequest: {
        pageSize: 5,
        pageNum: 1
      },
      // 分页 前往第1页
      currentPage: 1,
      // 分页
      total: 0
    }
  },
  mounted () {
    // 全查前台用户表（模糊查用户名称）
    this.selectShopEntity()
  },
  methods: {
    // 上传大堂图片规则
    beforeAvatarUploadLobby (file) {
      debugger
      this.imageFileLobby = file
      this.lobbyImageImageUrl = URL.createObjectURL(file)
      return false
    },
    // 上传门面图片规则
    beforeAvatarUploadFacade (file) {
      debugger
      this.imageFileFacade = file
      this.facadeImageIdImageUrl = URL.createObjectURL(file)
      // this.imageFile.push(1, 0, file)
      return false
    },
    // 上传门店logo图片规则
    beforeAvatarUploadShopLogo (file) {
      debugger
      // const isJPG = file.type === 'image/jpeg'
      // const isLt2M = file.size / 1024 / 1024 < 5

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      //   return false
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 5MB!')
      //   return false
      // }
      // this.imageFile.splice(1, 0, file)
      this.imageFileShopLogo = file
      this.shopLogoImageUrl = URL.createObjectURL(file)
      // this.imageFile.push(file)
      return false
    },
    // 添加点击X关闭是清空from表单数据
    closeExpertFormDialog (done) {
      this.$refs.ruleForm.resetFields()
      done()
      // done 用于关闭 Dialog
    },
    // 添加弹窗里的取消按钮 点击取消是清空from表单数据
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.lobbyImageImageUrl = ''
      this.facadeImageIdImageUrl = ''
      this.shopLogoImageUrl = ''
      this.saveShopDialogVisible = false
    },
    saveUserBackEntity (formName) { // 添加用户信息
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          debugger
          if (this.imageFile.length !== 0) {
            formData.set('file', this.imageFile)
          }
          // if (this.imageFileShopLogo !== File) {
          //   formData.set('file', this.imageFileShopLogo, this.imageFileShopLogo.name)
          // }
          // if (this.imageFileFacade !== File) {
          //   formData.set('file', this.imageFileFacade, this.imageFile.imageFileFacade)
          // }
          // if (this.imageFileLobby !== File) {
          //   formData.set('file', this.imageFileLobby, this.imageFile.imageFileLobby)
          // }
          formData.set('id', this.tableDataForm.id)
          formData.set('shopName', this.tableDataForm.shopName)
          formData.set('phone', this.tableDataForm.phone)
          formData.set('takeOutPhone', this.tableDataForm.takeOutPhone)
          formData.set('contactName', this.tableDataForm.contactName)
          formData.set('address', this.tableDataForm.address)
          formData.set('eatIn', this.tableDataForm.eatIn)
          formData.set('eatInTypeIds', this.tableDataForm.eatInTypeIds)
          formData.set('operationStatus', this.tableDataForm.operationStatus)
          formData.set('amount', this.tableDataForm.amount)
          formData.set('score', this.tableDataForm.score)
          formData.set('minPrice', this.tableDataForm.minPrice)
          formData.set('auditId', this.tableDataForm.auditId)
          this.$axios.post('/shop/saveShopEntity', formData
          ).then(res => {
            if (res.status === 200) {
              this.myMessage('success', '恭喜你，操作成功！') // 成功提示
              this.saveShopDialogVisible = false // 关闭窗口
              this.selectShopEntity()
            } else {
              this.myMessage('warning', res.data.obj) // 提示消息
            }
          }).catch(error => {
            console.log(error)
            this.myMessage('warning', '对不起，保存失败！')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 打开添加
    openSaveShopDialogVisible () {
      // this.imageFile = File
      this.saveShopDialogVisible = true
      this.tableDataForm = {
        id: ''
      }
      // 门店logo路径
      this.shopLogoImageUrl = ''
      // 门面图片路径
      this.facadeImageIdImageUrl = ''
      // 大堂图片路径
      this.lobbyImageImageUrl = ''
    },
    // 单查用户详情
    selectShopProtalByRoleOne (data) {
      debugger
      this.selectShopDialogVisible = true
      this.tableDataForm = data
      // 门店logo路径
      this.shopLogoImageUrl = 'http://127.0.0.1:15000/fileManager/getImageById?id=' + data.shopLogo
      // 门面图片路径
      this.facadeImageIdImageUrl = 'http://127.0.0.1:15000/fileManager/getImageById?id=' + data.facadeImageId
      // 大堂图片路径
      this.lobbyImageImageUrl = 'http://127.0.0.1:15000/fileManager/getImageById?id=' + data.lobbyImage
    },
    // 全查前台用户表（模糊查用户名称）
    selectShopEntity () {
      this.$axios.get('/shop/getAllShopEntityByShopName',
        {
          params: {
            shopName: this.shopName,
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum
          }
        }
      ).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页 每页条数
    handleSizeChange (val) {
      this.pageRequest.pageSize = val
      this.selectShopEntity()
    },
    // 分页 当前页
    handleCurrentChange (val) {
      this.pageRequest.pageNum = val
      this.selectShopEntity()
    },
    // 弹窗提示
    myMessage (type, message) {
      this.$message({
        type: type,
        message: message
      })
    }
  }
}
</script>

<style>
    .abvoeBox{
        width: 100%;
        height: 60px;
        text-align: left;
        margin-top: 5px;
    }
    .abvoeBox_input{
        width: 200px;
        height: 50px;
        margin-left: 10px;
    }
    .belowBox{
        margin-top: 20px;
    }
    .p1{
      border: none;
      background: none;
    }
    .p1:hover{
      color: #31c27c;
    }
    .span1{
      margin-left: 5px;
      color: red;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
